<template>
    <el-row :gutter="30" class="mt-40">
        <el-col :span="4">
            <div style="border-bottom:1px solid rgba(46, 48, 51, .1);margin-bottom: 15px;">
                <img src="../../../assets/img/139.png" />
                <img src="../../../assets/img/140.png" class="ml-10" />
            </div>
            <el-tree :data="categoryList" :check-on-click-node="true" :props="defaultProps" empty-text="暂无数据"
                @node-click="handleNodeClick"></el-tree>
        </el-col>
        <el-col :span="20">
            <div class="flex align-items space-between mb-20">
                <div class="orderBy">
                    <el-button :type="params.is_hot === 1 ? 'danger' : 'default'"
                        @click="handleChangeHot(params.is_hot === 1 ? 0 : 1)">
                        热门
                    </el-button>

                    <el-button v-for="(item, index) in orderBy" :key="index"
                        :type="index === orderByIndex ? 'danger' : 'default'"
                        @click="handleOrderBy(item.field, item.val, index);">{{
                        item.label }}
                        <i class="el-icon-sort" v-if="item.val > 1"></i>
                    </el-button>
                </div>
                <el-form @keyup.native.enter="handleSearch">
                    <el-input placeholder="请输入装备名称" v-model="params.title">
                        <template slot="suffix">
                            <el-button type="danger" @click="handleSearch">搜索</el-button>
                        </template>
                    </el-input>
                </el-form>
            </div>
            <div v-loading="loading">
                <template v-if="!isEmpty">
                    <zbItem v-for="(item, index) in list" :key="index" :item="item" />
                    <div class="text-center mt-30">
                        <el-pagination @current-change="handleCurrentChange" :current-page="params.page"
                            :page-size="params.pagesize" :page-sizes="[10, 20, 30, 40]"
                            layout="total, prev, pager, next" :total="total" hide-on-single-page>
                        </el-pagination>
                    </div>
                </template>
                <el-empty v-if="isEmpty" description="暂无数据"></el-empty>
            </div>
        </el-col>
    </el-row>
</template>

<script>
import zbItem from './zbItem.vue'
import { getSanCatList, getGoodsList } from "@/api/apis"
export default {
    name: "zbModule",
    components: {
        zbItem
    },
    data () {
        return {
            orderByIndex: null,
            orderBy: [
                {
                    val: 1,
                    field: 'fieldby',
                    label: '时间'
                },
                {
                    val: 2,
                    field: 'fieldby',
                    label: '价格'
                },
                {
                    val: 3,
                    field: 'fieldby',
                    label: '浏览量'
                },
                {
                    val: 4,
                    field: 'fieldby',
                    label: '销量'
                }
            ],
            defaultProps: {
                children: 'ch',
                label: 'name'
            },
            categoryList: [],
            // 搜索装备名称
            zbName: '',

            loading: true,
            supplierId: '',// 供应商ID
            list: [],// 场景方案列表
            isEmpty: false,
            total: 0, // 总条数
            params: {
                page: 1, // 当前页
                pagesize: 10, // 每页条数
                lastPage: 1, // 最后一页
                is_hot: 0, // 1热门
                fieldby: '', // 1时间2价格3浏览量4销量
                sort: '', // 1大到小2小到大
                cid: '', // 分类ID
                shop_id: this.supplierId // 店铺ID
            }
        }
    },
    mounted () {
        if (this.$route.query.id) {
            this.supplierId = Number(this.$route.query.id)
        }
        if (this.supplierId) {
            this.getList()
        }
        this.getSanCatListData();
    },
    methods: {
        // 排序：热门
        handleChangeHot (val) {
            this.params.is_hot = val
            this.getList()
        },
        // 排序：时间、价格、浏览量、销量
        handleOrderBy (field, val, index) {
            if (this.params[field] == val) {
                this.params[field] = ''
                this.orderByIndex = null
            } else {
                this.params[field] = val
                this.orderByIndex = index
            }

            this.getList()
        },
        handleSearch(){
            this.params.page = 1
            this.getList()
        },
        handleCurrentChange (val) {
            this.params.page = val
            this.getList()
        },
        getSanCatListData () {
            let that = this
            getSanCatList().then(res => {
                if (res.code === 1) {
                    //that.categoryList = res.data;
                    let extractedCategories = res.data.reduce((acc, item) => {
                        if (item.ch && item.ch.length > 0) {
                            acc = acc.concat(item.ch)
                        }
                        return acc
                    }, []);
                    that.categoryList = extractedCategories;
                } else {
                    this.$message.error(res.msg)
                }
                that.loading = false
            })
        },
        getList () {
            let that = this
            that.loading = true
            getGoodsList(this.params).then(res => {
                if (res.code === 1) {
                    that.list = res.data.data
                    that.total = res.data.total
                    //that.params.pagesize = Number(res.data.per_page)
                    that.params.lastPage = res.data.last_page
                    that.isEmpty = !that.list.length
                } else {
                    this.$message.error(res.msg)
                }
                that.loading = false
            })
        },
        handleNodeClick (data) {
            this.params.cid = data.cat_id;
            this.params.page = 1;
            this.getList();
        }
    }
}
</script>

<style lang="less" scoped>
.nav {
    display: grid;
    grid-template-columns: repeat(4, minmax(25%, 1fr));

    .nav-item {
        position: relative;
        text-align: center;
        padding: 15px;
        font-size: 20px;
        color: #fff;
        background: #f15953;
        cursor: pointer;

        &:not(:last-child) {
            &::after {
                content: '';
                position: absolute;
                top: 10%;
                right: 0;
                width: 2px;
                height: 80%;
                background-color: #fff;
            }
        }

        h3 {
            position: relative;
            font-weight: 500;
            overflow: hidden;

            &::before {
                content: '\e791';
                font-family: element-icons !important;
                font-size: 14px;
                position: absolute;
                left: -20px;
                /* 初始位置在左侧外部 */
                top: 50%;
                transform: translateY(-50%);
                transition: left 0.5s ease;
                /* 淡入动画 */
            }

            &::after {
                content: '\e792';
                font-family: element-icons !important;
                font-size: 14px;
                position: absolute;
                right: -20px;
                /* 初始位置在右侧外部 */
                top: 50%;
                transform: translateY(-50%);
                transition: right 0.5s ease;
                /* 淡入动画 */
            }
        }

        &.active {
            background: #ef312a;
        }

        &:hover,
        &.active {
            h3 {
                &::before {
                    left: 30%;
                }

                &::after {
                    right: 30%;
                }
            }
        }
    }
}

.hd-title {
    text-align: center;
    margin-top: 30px;

    h3 {
        font-size: 28px;
        font-weight: 700;
        color: #2E3033;
    }

    p {
        font-size: 14px;
        color: rgba(46, 48, 51, .6);
        margin-top: 10px;
    }
}

/deep/.el-input__suffix {
    right: 0;
}


/deep/.el-tree-node__content {
    height: 36px;
}
/deep/.el-tree-node:focus>.el-tree-node__content, /deep/.is-current {
    color: #fff;
    background-color: #f15953;
    border-radius: 4px;
}
.orderBy {
    .el-button {
        border-color: #fff;
    }
}
</style>